<!--  -->
<template>
  <a-modal :visible="visible" title="付款详情" :footer="null" @cancel="handleCancel" :width="'80%'">
    <FeeDetail
      ref="detail"
      :costId="costId"
      @init="initDetail"
      :is-modal="true"
      :can-audit="true"
      @refresh="refresh"
    />
    <!-- 按钮 -->
    <div class="modal-btn" v-if="paymentDetails.status == $const.EXAMINE_TYPE.PASSTAX.value">
      <a-button type="primary" @click="handleCancel"> 返回 </a-button>
      <a-button type="danger" v-if="isFinance" @click="openPopup(1)"> 个税办理 </a-button>
    </div>
    <div class="modal-btn" v-else-if="paymentDetails.status == $const.EXAMINE_TYPE.DAIZHIFU.value">
      <a-button type="primary" v-if="isFinance" :loading="payLoading" @click="$emit('payRecord')"> 支付 </a-button>
      <a-button type="primary" ghost @click="handleCancel"> 返回 </a-button>
    </div>
    <div class="modal-btn" v-else-if="isSiteCrc && showActionBtn && $auth('FEE_REVIEW.FEE_REVIEW_EDIT')">
      <a-button type="primary" @click="openPopup(true)"> 同意 </a-button>
      <a-button type="danger" @click="openPopup(false)"> 驳回 </a-button>
    </div>
  </a-modal>
</template>

<script>
import FeeDetail from '../cost-apply/FeeDetail'

export default {
  name: 'ViewModal',
  props: {
    info: {
      type: Object,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    },
    costId: {
      type: Number,
      default: 0
    },
    thisStatus: {
      type: [Number, String],
      default: 0
    }
  },
  components: { FeeDetail },
  watch: {
    visible (val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.detail.getInfo()
        })
      }
    }
  },
  data () {
    return {
      paymentDetails: {},
      dataTable: [],
      form: {},
      condition: false,
      // visibles: this.$props.visible,
      statusList: [
        {
          id: 1,
          name: '状态1'
        },
        {
          id: 2,
          name: '状态2'
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      processList: [], // 审批记录
      approveMainList: [], // 审批流程,
      checkIndex: 0,
      applyDesc: '',
      bankCardNo: '',
      bankName: '',
      versionName: '',
      payLoading: false,
      isSiteCrc: true, // 是否当前site的CRC，不是CRC的时候不需要这个判段，所以默认是true好一点
      isFinance: 0, // 个税凭证和支付只有财务可以看到
      roleRecord: null // 详情接口返回  用于处理审批按钮 显示状态
    }
  },
  computed: {
    showActionBtn () {
      const res = this.processList.find(v => v.resultOrAction === 2 && v.roleCode && v.proFlowNodeCode.slice(3) === '0000') || {}
      const isRole = this.$store.state.user.roles && this.$store.state.user.roles.length && this.$store.state.user.roles[0].code === res.roleCode
      if (!isRole) return false
      // 到人
      if (res.processType === 1) {
        return res.processorId.split(',').includes(String(this.$store.state.user.info.id))
      }
      // 到角色
      return isRole
    }
  },
  created () {
    this.checkRole()
  },
  mounted () {
  },
  methods: {
    refresh () {
      this.$emit('refresh')
    },
    initDetail (val, val2, isSiteCrc) {
      this.paymentDetails = val
      this.processList = val2
      this.isSiteCrc = isSiteCrc
    },
    // 判断角色
    checkRole () {
      this.isFinance = this.$options.filters.isHasAuth(this.$const.ROLE_TYPE.FINANCE.value) ? 1 : 0
    },
    openPopup (value) {
      if (value === 1) {
        const item = {
          status: value,
          id: this.paymentDetails.id,
          personalTax: this.paymentDetails.personalTax,
          totalAmount: this.paymentDetails.totalAmount
        }
        this.$emit('openPopup', item)
      } else {
        const item = {
          status: value,
          id: this.paymentDetails.id,
          applyReason: this.paymentDetails.applyReason,
          userName: this.paymentDetails.ptsName || this.paymentDetails.researchDetailName,
          totalAmount: this.paymentDetails.totalAmount
        }
        this.$emit('openPopup', item)
      }
    },
    // 关闭回调
    handleCancel () {
      this.$emit('closeCallback')
    }
  }
}
</script>
<style scoped>
.status {
  margin: 0 20px;
  padding: 3px 10px;
  border: 1px solid #70b603;
  border-radius: 40px;
  color: #70b603;
  display: inline;
}

.modal-btn{
  display: flex;
  justify-content: flex-end;
  padding-top: 24px;
}
.modal-btn button {
  margin-left: 12px;
}
</style>
